<template>
    <div class="icon-selector">
      <el-select v-model="selectedIcon" placeholder="选择图标" style="width: 100%" @change="handleChange">
        <el-option
          v-for="icon in iconList"
          :key="icon"
          :label="icon"
          :value="icon">
          <component :is="icon" style="margin-right: 8px" />
          {{ icon }}
        </el-option>
      </el-select>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  import * as Icons from '@element-plus/icons-vue'
  
  const props = defineProps({
    modelValue: String
  })
  
  const emit = defineEmits(['update:modelValue'])
  
  const selectedIcon = ref(props.modelValue)
  watch(() => props.modelValue, val => selectedIcon.value = val)
  watch(selectedIcon, val => emit('update:modelValue', val))
  
  const iconList = Object.keys(Icons)
  </script>
  